<template>
    <div>
      <div class="right-bottom-view">
        <div class="vxe-icon-location switch-map" :style="{color:openType?'#04AE70':'#333'}" @click="openPosition"></div>
        <el-popover placement="left-start" trigger="hover" width="50">
               <div class="switch-images" @click="btnChangeMap('yx')" :class="{'on':switchMap=='yx'}"><img src="../images/yx.png" alt="">影像图</div>
               <div class="switch-images" @click="btnChangeMap('sl')" :class="{'on':switchMap=='sl'}" style="margin-top:5px;"><img src="../images/sl.png" alt="">矢量图</div>
                <template #reference>
                 <div class="vxe-icon-maximize switch-map"></div>
                </template>
              </el-popover>
         <div class="zoom-view">
           <div class="zoomMax vxe-icon-add" @click="btnZoomMax"></div>
           <div class="zoomValue">{{modelValue}}</div>
           <div class="zoomMin vxe-icon-minus" @click="btnZoomMin"></div>
         </div>
      </div>

      <div class="postion-top-view" v-if="openType">
        <el-form :inline="true" size="mini" :model="mapForm">
            <el-form-item label="经度：">
                <vxe-input v-model="mapForm.longitude" placeholder="经度" type="number" :min="1" :max="150" exponential clearable></vxe-input>
            </el-form-item>
            <el-form-item label="纬度：">
                <vxe-input v-model="mapForm.latitude" placeholder="纬度" type="number" :min="1" :max="90" exponential clearable></vxe-input>
            </el-form-item>
            <el-form-item style="margin-right: 0;">
                <el-button type="primary" class="vxe-icon-search" @click="btnQuery">搜 索</el-button>
            </el-form-item>
            </el-form>
      </div>
    </div>
  </template>
  
  <script setup>
  import {ref,reactive,onMounted,watch} from "vue"
  const props = defineProps({
    modelValue:{
    type:Number,
      default(){
        return 10
      }
    },
    maxZoom:{
      type:Number,
      default(){
        return 20
      }
    },
    minZoom:{
      type:Number,
      default(){
        return 4
      }
    },
  })
  const emit = defineEmits(['changeZoom','changeMapType','openType','locationQuery','update:modelValue'])
  const switchMap = ref('yx')
  const currentZoom = ref(10)
  const openType = ref(false)
  const mapForm = ref({longitude:120,latitude:30})

  onMounted(()=>{
    currentZoom.value = props.modelValue
  })

  watch(() => props.modelValue, (n, o) => {
    currentZoom.value =n
})
//切换地图类型
 const btnChangeMap = (type)=>{
    switchMap.value = type
    emit('changeMapType',type)
  }

  //放大
  const btnZoomMax = ()=>{
    if(currentZoom.value<props.maxZoom)
    currentZoom.value = currentZoom.value+1
    emit('changeZoom',currentZoom.value)
  }

  //缩小
  const btnZoomMin = ()=>{
    if(currentZoom.value>props.minZoom)
    currentZoom.value = currentZoom.value-1
    emit('changeZoom',currentZoom.value)
  }
  //缩小
  const openPosition = ()=>{
    openType.value = !openType.value
    emit('openType',openType.value)

  }
  

  const btnQuery =()=>{
    if(mapForm.value.latitude && mapForm.value.longitude)
    emit('locationQuery',mapForm.value)
  }
  </script>
  <style>
  .el-popover.el-popper{
    min-width:50px;
  }
   .switch-images{
    cursor: pointer;
    width:50px;
    text-align: center;
    font-size: 12px;
    border:2px solid #888;
    background-color: #888;
    color: #fff;
   }
   .switch-images.on{
    background-color: #04AE70;
    border:2px solid #04AE70;
   }
    .switch-images img{
        height:40px;
        width:50px;
    }
  </style>
  <style lang="scss" scoped>
.right-bottom-view{
        position: absolute;
        bottom: 10px;
        right:20px;
        z-index: 99;
        .switch-map{
        width: 40px;
            height: 40px;
            line-height:40px;
            background-color: #fff;
            font-size:22px;
            text-align: center;
            color: #333333;
            border:1px solid #dcdfe6;
            border-radius:2px;
            margin-bottom:10px;
            cursor: pointer;
        }
        .zoom-view{
        border:1px solid #dcdfe6;
        border-radius:2px;
        .zoomValue{
            width: 40px;
            height: 40px;
            line-height:40px;
            background-color: #fff;
            font-size:16px;
            text-align: center;
            color: #333333;
        }
        .zoomMin,
        .zoomMax{
            z-index: 1;
            top: 1px;
            width: 40px;
            height: 40px;
            line-height:40px;
            text-align: center;
            background: #f5f7fa;
            color: #606266;
            cursor: pointer;
            font-size: 16px;
        }
        .zoomMax{
            border-bottom: 1px solid #dcdfe6;
        }
        .zoomMin{
            border-top: 1px solid #dcdfe6;
        }
        }
  }
  .postion-top-view{
    width:610px;
    position: absolute;
    left: 50%;
    top:50px;
    margin-left:-300px;
    z-index:99;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
    .el-form--inline .el-form-item{
        margin-bottom: 0;
    }
  }
  </style>
  